import { PageContainer } from "@ant-design/pro-layout"
import { useCtx } from "@sker/sdk"
import { renderAdminPage } from "@sker/ui"
import { Avatar, Card, List } from "antd"

export const TaskPage: React.FC<{}> = ({ }) => {
    return <PageContainer title={'我的账户'} tabList={[
        { tab: '基础信息', tabKey: 'base', children: <MineBaseInfo /> },
        { tab: '账号绑定', tabKey: 'bind', children: <MineBindInfo /> },
    ]}></PageContainer>
}

renderAdminPage(TaskPage, 'imeepos/core/web/mine/profile')

const MineBindInfo: React.FC<{}> = ({ }) => {
    return <div>
        <Card title="账号绑定">
            <List
                dataSource={[
                    { title: '手机绑定', description: '', edit: () => { }, edit_title: '绑定手机' },
                    { title: '邮箱绑定', description: '', edit: () => { }, edit_title: '绑定邮箱' },
                    { title: '微信绑定', description: '', edit: () => { }, edit_title: '绑定微信' }
                ]}
                renderItem={(item, index) => {
                    return <List.Item actions={[<a onClick={item.edit}>{item.edit_title}</a>]}>
                        <List.Item.Meta title={item.title} description={item.description}></List.Item.Meta>
                    </List.Item>
                }}>
            </List>
        </Card>
    </div>
}

const MineBaseInfo: React.FC<{}> = ({ }) => {
    const { currentUser, me } = useCtx()
    return <div>
        <Card title="账户设置">
            <List
                dataSource={[
                    { title: '头像', description: <Avatar src={currentUser?.avatar} />, edit: () => { } },
                    { title: '用户', description: currentUser?.username, edit: () => { } },
                    { title: '密码', description: '******', edit: () => { } }
                ]}
                renderItem={(item, index) => {
                    return <List.Item actions={[<a onClick={item.edit}>修改</a>]}>
                        <List.Item.Meta title={item.title} description={item.description}></List.Item.Meta>
                    </List.Item>
                }}>
            </List>
        </Card>
        <Card title="基础信息" className="mt-12px">
            <List
                dataSource={[
                    { title: '真实姓名', description: <Avatar src={currentUser?.avatar} />, edit: () => { } },
                    { title: '出生年月日', description: currentUser?.username, edit: () => { } },
                    { title: '昵称', description: '******', edit: () => { } },
                    { title: '上次登录时间', description: '******', edit: () => { } },
                    { title: '上次登录IP', description: '******', edit: () => { } },
                    { title: '注册时间', description: '******', edit: () => { } },
                    { title: '备注', description: '******', edit: () => { } },
                ]}
                renderItem={(item, index) => {
                    return <List.Item actions={[<a onClick={item.edit}>修改</a>]}>
                        <List.Item.Meta title={item.title} description={item.description}></List.Item.Meta>
                    </List.Item>
                }}>
            </List>
        </Card>
    </div>
}